<template>
  <el-drawer v-model="drawer" title="详情" :direction="direction" size="71%" class="drawer" destory-on-close v-if="drawer">
    <div class="contain" >   
      <div class="second">
        <img src="@/assets/imgs/logo.png" alt="" class="logo" />
        <div class="main">
          <div class="m-top">
            <div class="m-left">
              <div class="m-tleft"> 
              </div>
            </div>
          </div>
          <div class="m-bottom">
            <el-descriptions
              class="margin-top"
              :column="3"
              :size="size"
            >
              <el-descriptions-item label="主题:">
                {{formData.theme}}
              </el-descriptions-item>
              <el-descriptions-item label="有效日期:">
                {{formData.startDate}} 到 {{formData.endDate}}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              class="margin-top"
              :column="3"
              :size="size"
            >
              <el-descriptions-item label="内容简介:">
                {{formData.content}}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              class="margin-top"
              :column="3"
              :size="size"
            >
              <el-descriptions-item label="公函内容:">
                <div v-html="userBio"></div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <div class="third">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="附件列表" name="first">
            <el-table ref="multipleTableRef" :data="uploadList" style="width: 100%; margin-top: 10px; height: 200px;">
              <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
              <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true" />
              <el-table-column label="文件路径" align="center" prop="url" :show-overflow-tooltip="true" />
              <el-table-column label="操作" align="center" fixed="right" width="140px">
                <template #default="scope">
                  <el-link type="primary" download :href="scope.row.url" :underline="false" target="_blank">下载</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="审批记录" name="second">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%; margin-top: 10px; height: 200px;">
              <el-table-column label="序号" type="index"  header-align="center" align="center" width="60px" fixed />
              <el-table-column label="审批人" align="center" prop="creator" :show-overflow-tooltip="true">
                <template #default="scope">
                  {{ userList.find((user) => user.id === scope.row.creator)?.nickname }}
                </template>
              </el-table-column>
              <el-table-column label="审批时间" align="center" prop="createTime" :formatter="dateFormatter" :show-overflow-tooltip="true" />
              <el-table-column label="审批结果" align="center" prop="approveResult" :show-overflow-tooltip="true">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.PUBLIC_APPROVAL_STATUS" :value="scope.row.approveResult" />
                </template>
              </el-table-column>
              <el-table-column label="审批意见" align="center" prop="approveOpinion" :show-overflow-tooltip="true" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="审批意见">
        <el-input type="textarea" :rows="8" v-model="formData.approveOpinion" />
      </el-form-item>
    </el-form>
    <div style="text-align: center; margin-top: 20px;">
      <el-button @click="submitForm(2)" type="primary" :disabled="formLoading">审批通过</el-button>
      <el-button @click="submitForm(3)" type="primary" :disabled="formLoading">审批驳回</el-button>
      <el-button @click="drawer = false">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { BaseOfficialLetterApi, BaseOfficialLetterRecordVO } from '@/api/infra/baseofficialletter'
import * as UserApi from '@/api/system/user'

import { DICT_TYPE } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import type { UploadUserFile } from 'element-plus'
import { ref, defineProps } from 'vue'
import { dateFormatter } from '@/utils/formatTime'

/** 公函 表单 */
defineOptions({ name: 'DetailForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userList = ref<UserApi.UserVO[]>([])
const uploadList = ref<UploadUserFile[]>([])
const tableData = ref<BaseOfficialLetterRecordVO[]>([])
const activeName = ref('first')
const drawer = ref(false)
const userBio = ref('')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  theme: undefined,
  daterange: undefined,
  startDate: undefined,
  endDate: undefined,
  fileExists: undefined,
  content: undefined,
  remark: undefined,
  imageAddress: undefined,
  status: CommonStatusEnum.ENABLE,
  detailData: undefined,
  fileData: undefined
})
const formData2 = ref({
  id: undefined,
  officialLetterId:undefined,
  approveResult: undefined,
  approveOpinion: undefined
})

/** 查询列表 */
const open = async (id?: number) => {
  resetForm()
  uploadList.value = []
  tableData.value = []
  userBio.value = ''
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    drawer.value = true
    formData2.value.officialLetterId = id
    try {
      formData.value = await BaseOfficialLetterApi.getBaseOfficialLetter(id)
      userBio.value = formData.value.remark

      uploadList.value = await BaseOfficialLetterApi.getLetterFileList(id)
      tableData.value = await BaseOfficialLetterApi.getLetterRecordsList(id)
    } finally {
      formLoading.value = false
    }
  }
  userList.value = await UserApi.getSimpleUserList()
}
defineExpose({ open }) // 提供 open 方法，

const handleClick = async (tab, event) => {
  activeName.value = tab.props.name
  const id = formData2.value.officialLetterId
  if (activeName.value === 'first') {
    uploadList.value = await BaseOfficialLetterApi.getLetterFileList(id)
  } else {
    tableData.value = await BaseOfficialLetterApi.getLetterRecordsList(id)
  }
}

/** 提交表单 */
const formRef = ref() // 表单 Ref
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async (flag) => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData2.value as unknown as BaseOfficialLetterRecordVO
    data.approveResult = flag
    
    await BaseOfficialLetterApi.createBaseOfficialRecord(data)      
    if (flag === 2) {
      message.success('审批通过成功')
    } else {
      message.success('审批驳回成功')
    }
      
    drawer.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    theme: undefined,
    daterange: undefined,
    startDate: undefined,
    endDate: undefined,
    fileExists: undefined,
    content: undefined,
    remark: undefined,
    imageAddress: undefined,
    status: CommonStatusEnum.ENABLE,
    detailData: undefined,
    fileData: undefined
  }

  formData2.value = {
    id: undefined,
    officialLetterId:undefined,
    approveResult: undefined,
    approveOpinion: undefined
  }
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
.first{
  line-height:25px;
  font-size:18px;
  color:#8a8a8a;
  display:flex;
  :deep(.el-icon){
    margin-top:5px !important
  }
}
.left{
  margin-left:12px
}
.second{
  background:#fff;
  padding:15px 20px;
  display:flex;
  margin-top:10px;
}
.logo{
  height:80px;
  width:80px
}
.main{
  margin-left:30px;
  width:calc(100% - 110px)
}
.m-top{
  display: flex;
  justify-content: space-between;
}
.m-tleft{
  display:flex
}
.gender{
  height:20px;
  width:20px;
  margin:3px 8px 0 8px
}
.age{
  color:#8a8a8a;
  line-height:26px
}
.tag1{
  padding:5px 10px;
  color:#4341ff;  
  border:1px solid #4341ff;
  margin-top: 10px;
  font-size:14px
}
.tag2{
  padding:5px  10px;
  color:#dc806f;
  border:1px solid #dc806f;
  margin-left:10px;
  margin-top: 10px;
  font-size:14px
}
.tag3{
  padding:5px  10px;
  color:#787878;
  margin-top: 10px;
  margin-left:10px;
  border:1px solid #787878;
  font-size:14px
}
.name{
  font-size:20px;
  font-weight:bold
}
.m-bottom{
  margin:20px 0;
}
:deep(.el-descriptions__label){
  font-size:16px;
  color:#8a8a8a
}
:deep(.el-descriptions__content){
  font-size:16px;
  color:#333
}
.third{
  background:#fff;
  margin-top:10px;
  padding:15px
}
:deep(.el-tabs__item){
  padding:0 30px !important;
}
</style>